<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button class="operation" type="text" @click="handleBack"><i class="el-icon-back"></i>返回</el-button>
      <!-- <el-button class="operation" type="text">修改</el-button> -->
    </div>
    <el-descriptions :title="userInfo.name">
      <el-descriptions-item label="名称">{{userInfo.name}}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{userInfo.username}}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{userInfo.email}}</el-descriptions-item>
      <el-descriptions-item label="电话">{{userInfo.phone}}</el-descriptions-item>
      <el-descriptions-item label="地址">{{city}} {{street}}</el-descriptions-item>
      <el-descriptions-item label="邮编">{{zipcode}}</el-descriptions-item>
    </el-descriptions>
  </el-card>

</template>

<script>

export default {
  data() {
    return {
      userInfo: "",
      city:'',
      street:'',
      zipcode:''
    }
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      fetch('http://47.241.102.141:3000/users')
        .then((response) => response.json())
        .then(data => {
          for (let i = 0; i < data.length; i++) {
            if (data[i].id == this.$route.params.id) {
              this.userInfo = data[i];
              this.city = data[i].address.city;
              this.street = data[i].address.street;
              this.zipcode = data[i].address.zipcode;
            }
          }
          
          console.log(this.userInfo.address.city);
        });
    },
    handleBack() {
      this.$router.push('/dashboard/users');
    }
  },
}
</script>

<style>
.box-card {
  /* width: 800px; */
  min-height: 100px;
}

.text {
  font-size: 16px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.operation {
  float: left;
  font-size: 16px;
  padding: 3px 0
}
</style>